<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row class="row-bg" type="flex" align="middle">
      <p style="padding: 0;margin: 0"><b>消息类型</b> 配置消息中心消息类型的枚举项
      </p>
    </el-row>
    <el-card class="acc-arch">
      <ft-pagination :current-page="1" :page-size="8" :total="totalRowNum" @pageChange="loadMessageTypePage">
        <div slot="toolbar" class="acc-arch__toolbar">
          <el-button type="primary" size="small" icon="joys-icon-refresh"
                     @click="loadMessageTypePage(pageIndex,pageSize)">刷新
          </el-button>
          <el-button style="margin-right: 20px" type="primary" size="small" icon="joys-icon-new" :disabled="disabled"
                     @click="add">新建
          </el-button>
          <el-input style="padding-left: 15px;width: 250px" v-model="messageTypeName" placeholder="请输入消息类型名称"
                    @change="loadMessageTypePage(pageIndex,pageSize)"/>
        </div>
        <el-table :data="messageTypePage" row-key="messageTypeId">
          <el-table-column label="消息类型图标" prop="messageTypeName" align="left" min-width="50px">
            <template slot-scope="scope">
              <message-img v-model="scope.row.messageTypeId" ref="messageImg" :load-uuid="loadUuid"
                           @return="saveMessageImg($event,scope.$index,scope.row)"></message-img>
            </template>
          </el-table-column>
          <el-table-column label="消息类型名称" prop="messageTypeName" align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.messageTypeName" v-if="scope.row.status=='editing'"></el-input>
              <span v-else>{{scope.row.messageTypeName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息类型编码" prop="messageTypeCode" align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.messageTypeCode" v-if="scope.row.status=='editing'"></el-input>
              <span v-else>{{scope.row.messageTypeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text" size="small"
                @click="save(scope.$index, scope.row)" v-if="scope.row.status=='editing'">保存
              </el-button>
              <el-button type="text" size="small" @click="cancel(scope.$index,scope.row)"
                         v-if="scope.row.status=='editing'">
                取消
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status!='editing'&&if_display=='Y'">修改
              </el-button>
              <em class="mt_em_cs" v-if="scope.row.status!='editing'&&if_display=='Y'">|
              </em>
              <el-popover v-if="scope.row.status!='editing'"
                          placement="top"
                          width="160"
                          v-model="scope.row.delVisible">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                  <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </ft-pagination>
    </el-card>
  </div>
</template>

<script>
  import MessageImg from "./messageSelect/MessageImg";
  import uuid from 'uuid'

  export default {
    name: "MessageType",
    components: {MessageImg},
    data() {
      return {
        disabled: null,
        messageTypePage: [],
        messageTypeName: null,
        if_display: "Y",
        totalRowNum: null,
        pageIndex: 1,
        pageSize: 8,
        //临时克隆对象，用于修改取消还原数据
        obj: {},
        //图片资源
        imgFile: null,
        loadUuid:null
      }
    },
    methods: {
      loadMessageTypePage(pageIndex, pageSize) {
        this.pageIndex = pageIndex || this.pageIndex || 1
        this.pageSize = pageSize || this.pageSize || 10
        this.messageTypePage = []
        this.disabled = null
        this.if_display = "Y"
        const url = '/joys-rest/joys-admin/messageType/page'
        this.$http.get(url, {
          params: {
            messageTypeName: this.messageTypeName,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        }).then(resp => {
          this.messageTypePage = resp.data.rows
          this.totalRowNum = resp.data.total
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      add() {
        this.messageTypePage.unshift({
          status: 'editing',
        })
        this.if_display = "N"
        this.disabled = true
      },
      //上传图片
      saveMessageImg(img, index, value) {
        this.imgFile = img
        this.loadUuid = uuid()
        if (value.messageTypeId) {
          this.$refs.messageImg.handlePicture(this.imgFile, value.messageTypeId)
        }
      },
       save(index, value) {
        const url = '/joys-rest/joys-admin/messageType/saveType'
        this.$http.put(url, value).then(resp => {
          value = resp.data
          value.status = "noEditing"
          this.$set(this.messageTypePage, index, value)
          this.if_display = 'Y'
          this.disabled = null
          this.$message.success("保存成功！")
          if (this.imgFile && value.messageTypeId) {
            this.$refs.messageImg.handlePicture(this.imgFile, value.messageTypeId)
          }
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      cancel(index, vo) {
        vo.status = "noEditing"
        this.if_display = 'Y'
        this.disabled = null
        if (vo.messageTypeId != null) {
          //还原数据
          vo = JSON.parse(JSON.stringify(this.obj));
          vo.status = "noEditing"
          this.$set(this.messageTypePage, index, vo)
        } else {
          this.messageTypePage.splice(index, 1)
        }
      },
      handleEdit(index, vo) {
        vo.status = "editing"
        this.if_display = 'N'
        this.disabled = true
        //克隆，取消修改时使用
        this.obj = JSON.parse(JSON.stringify(vo));
      },
      handleDelete(index, vo) {
        const url = '/joys-rest/joys-admin/messageType/' + vo.messageTypeId
        this.$http.delete(url).then(resp => {
          this.messageTypePage.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, resp => {
          this.$message({
            type: 'failed',
            message: '删除失败!'
          })
        });
      }
    }
  }
</script>

<style scoped>
  .button-bar {
    display: inline-block;
    width: 150px;
    padding: 8px 0;
    vertical-align: top;
  }

  .input-bar {
    display: inline-block;
    width: calc(100% - 210px);
    font-size: 0px;
    vertical-align: top;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;
  }

  .mt_em_cs{
    font-family: PingFangSC-Regular;
    font-size: 13px;color:
    rgba(27,-2147483648,-2147483648,0.40);
    line-height: 13px;
    font-style:normal
  }

</style>
